<script setup lang="ts">
import { computed, onMounted, watch } from 'vue';
import { RouterLink, RouterView, useRoute } from 'vue-router';
import { useSettingsStore } from '@/stores/settingsStore';
// Import icons directly if not using auto-import, or rely on unplugin-vue-components

const settingsStore = useSettingsStore();
const route = useRoute();

// 当前主题
const currentTheme = computed(() => settingsStore.theme);

// 监听路由变化，添加页面滚动到顶部
watch(() => route.path, () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

// 切换主题
const toggleTheme = () => {
  const newTheme = currentTheme.value === 'light' ? 'dark' : 'light';
  settingsStore.setTheme(newTheme);
};

// 初始化
onMounted(() => {
  // 确保主题设置已应用
  document.documentElement.setAttribute('data-theme', currentTheme.value);
});
</script>

<template>
  <div class="app min-h-screen flex flex-col bg-base-100">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 backdrop-blur-sm bg-base-100 bg-opacity-90 border-b border-base-200">
      <div class="container mx-auto px-4">
        <div class="navbar min-h-16">
          <div class="navbar-start">
            <div class="dropdown">
              <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
                <icon-heroicons-bars-3 class="w-5 h-5" />
              </div>
              <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow-lg bg-base-100 rounded-box w-52">
                <li><RouterLink to="/">首页</RouterLink></li>
                <li><RouterLink to="/blog">博客</RouterLink></li>
                <li><RouterLink to="/editor">写文章</RouterLink></li>
                <li><RouterLink to="/tags">标签</RouterLink></li>
                <li><RouterLink to="/import-export">导入导出</RouterLink></li>
                <li><RouterLink to="/settings">设置</RouterLink></li>
              </ul>
            </div>
            <RouterLink to="/" class="btn btn-ghost text-xl hover:bg-transparent">
              <span class="text-primary font-bold">Vue</span>博客
            </RouterLink>
          </div>
          <div class="navbar-center hidden lg:flex">
            <ul class="menu menu-horizontal px-1">
              <li>
                <RouterLink to="/" class="nav-link" active-class="active">首页</RouterLink>
              </li>
              <li>
                <RouterLink to="/blog" class="nav-link" active-class="active">博客</RouterLink>
              </li>
              <li>
                <RouterLink to="/editor" class="nav-link" active-class="active">写文章</RouterLink>
              </li>
              <li>
                <RouterLink to="/tags" class="nav-link" active-class="active">标签</RouterLink>
              </li>
              <li>
                <RouterLink to="/import-export" class="nav-link" active-class="active">导入导出</RouterLink>
              </li>
            </ul>
          </div>
          <div class="navbar-end">
            <div class="dropdown dropdown-end">
              <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
                <icon-heroicons-cog-6-tooth class="w-5 h-5" />
              </div>
              <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow-lg bg-base-100 rounded-box w-52">
                <li><RouterLink to="/settings">设置</RouterLink></li>
                <li>
                  <button @click="toggleTheme">
                    <icon-heroicons-moon v-if="currentTheme === 'light'" class="w-4 h-4 mr-2" />
                    <icon-heroicons-sun v-else class="w-4 h-4 mr-2" />
                    {{ currentTheme === 'light' ? '切换到暗色模式' : '切换到亮色模式' }}
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </header>
    
    <!-- 主内容区，添加页面过渡效果 -->
    <main class="flex-grow">
      <RouterView v-slot="{ Component }">
        <Transition name="page" mode="out-in">
          <component :is="Component" />
        </Transition>
      </RouterView>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-base-200 border-t border-base-300">
      <div class="container mx-auto px-4 py-10">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 class="text-lg font-bold mb-4">关于</h3>
            <p class="opacity-70">Vue博客系统是一个现代化的内容管理平台，基于Vue 3和TypeScript构建。</p>
          </div>
          <div>
            <h3 class="text-lg font-bold mb-4">链接</h3>
            <ul class="space-y-2">
              <li><RouterLink to="/" class="hover:text-primary transition-colors">首页</RouterLink></li>
              <li><RouterLink to="/blog" class="hover:text-primary transition-colors">博客</RouterLink></li>
              <li><RouterLink to="/settings" class="hover:text-primary transition-colors">设置</RouterLink></li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-bold mb-4">联系我们</h3>
            <div class="flex space-x-4">
              <a href="#" class="btn btn-circle btn-ghost">
                <icon-simple-icons-github class="w-5 h-5" />
              </a>
              <a href="#" class="btn btn-circle btn-ghost">
                <icon-simple-icons-twitter class="w-5 h-5" />
              </a>
              <a href="#" class="btn btn-circle btn-ghost">
                <icon-heroicons-envelope class="w-5 h-5" />
              </a>
            </div>
          </div>
        </div>
        <div class="divider my-6"></div>
        <div class="text-center opacity-70">
          <p>© {{ new Date().getFullYear() }} Vue博客系统 - 保留所有权利</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style>
/* 全局样式 */
html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

/* 导航链接样式 */
.nav-link {
  @apply relative px-3 py-2 rounded-lg;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: hsl(var(--p));
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 60%;
}

.nav-link.active {
  @apply text-primary font-medium;
}

/* 页面过渡效果 */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.page-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.page-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>
